<template>
  <el-form ref="fltForm" label-width="130px" :model="FLT_INFO" size="mini">
    <el-row>
      <el-col :span="24">
        <el-form-item label="部门序号：" prop="dptSeq" :rules="rules.dptSeq">
          <el-input :disabled="disabled" maxlength="125" style="width: 100%" v-model="FLT_INFO.dptSeq"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
       <el-col :span="24">
        <el-form-item label="部门代码：" prop="dptCode" :rules="rules.dptCode">
          <el-input :disabled="!isAdd" maxlength="20" v-model="FLT_INFO.dptCode"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="部门名称：" prop="dptName" :rules="rules.dptName">
          <el-input :disabled="disabled" maxlength="37" style="width: 100%" v-model="FLT_INFO.dptName"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
       <el-col :span="24">
        <el-form-item label="上级部门：" prop="dptPredptName" :rules="rules.dptPredptName">
          <el-popover
            placement="bottom-start"
            trigger="click"
            :appendToBody="false"
            :width="width"
            :popper-options="{
              boundariesElement: 'scrollParent',
            }"
            v-model="showpop"
            :disabled="disabled"
           >
              <el-tree
              :data="dptList"
              :props="defaultProps"
               node-key="id"
               default-expand-all
               ref="tree"
               @node-click="chose"
              >
              </el-tree>
            <el-input ref="widthRef" :disabled="disabled" slot="reference" placeholder="点击选择上级部门" v-model="FLT_INFO.dptPredptName"></el-input>
          </el-popover>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row class="el-dialog__footer">
      <el-col :span="24">
        <el-form-item>
          <el-button @click="close">关闭</el-button>
          <el-button v-if="!disabled" @click="save" type="primary">保存</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import {
  getSDepartment
} from '@/request/api'
import resize from '@/mixins/resize'

export default {
  name: 'dialog',
  mixins: [resize],
  props: {
    flt_info: {
      type: Object,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    dialogmode: {
      type: String
    }
  },
  data() {
    return {
      width: 0,
      FLT_INFO: this.flt_info,
      dptList: [],
      showpop: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
    }
  },
  watch: {
    flt_info() {
      this.FLT_INFO = this.flt_info
    }
  },
  computed: {
  // 是否新增操作
    isAdd () {
      return this.dialogmode === this.DIALOG_MODE.ADD
    },
    rules() {
      return {
        dptSeq: [
          {
            pattern: /^([^\u4e00-\u9fa5])+$/,
            message: '禁止输入中文'
          },
          { required: true, message: '请输入部门序号', trigger: 'blur' }
        ],
        dptCode: [
          {
            pattern: /^([^\u4e00-\u9fa5])+$/,
            message: '禁止输入中文'
          },
          { required: true, message: '请输入部门代码', trigger: 'blur' }
        ],
        dptName: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }
        ],
        dptPredptName: [
          { required: true, message: '请选择上级部门', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    close() {
      // 关闭时清楚验证信息
      this.$emit('close')
    },
    save() {
      this.$refs['fltForm'].validate(valid => {
        if (valid) {
          this.$emit('save', this.FLT_INFO)
        }
      })
    },
    getDepartment() {
      getSDepartment().then(res=>{
        this.dptList = res.data[0].dpts
        if (this.dialogmode === this.DIALOG_MODE.ADD) {
          // 新增时默认第一个部门为上级部门
          this.FLT_INFO.dptPredptName = this.dptList[0].name
          this.FLT_INFO.dptPredptId = this.dptList[0].id
          this.FLT_INFO.dptFltId = this.dptList[0].id
          console.log(this.dptList)
          console.log(this.dptList[0].id+'++'+this.dptList[0].name+'++'+this.dptList[0].id)
        }

      })
    },
    chose(data) {
      // 上级部门id
      this.FLT_INFO.dptPredptId = data.id
      this.FLT_INFO.dptPredptName = data.name
      // 当前页面选择的
      this.FLT_INFO.dptFltId = data.id
      this.showpop = false
    },
  },
  mounted() {
    this.$refs.fltForm.clearValidate()
    this.getDepartment()
  },
  created() {
    this.resize = () => {
      this.width = this.$refs.widthRef.$el.offsetWidth
    }
  }
}
</script>

<style lang="scss" scoped></style>
